<template>
  <!-- Navigation-->
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">
      <!--  头像    -->
      <span class="d-none d-lg-block">
        <el-upload
            class="avatar-uploader"
            :headers="{
              'Authorization':userStore.user.token
            }"
            :show-file-list="false"
            action="/api/user/header"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="userStore.user.header" class="img-fluid img-profile rounded-circle mx-auto mb-2 avatar"
               :src="userStore.user.header" alt="..."/>
          <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
        </el-upload>
      </span>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
            aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span
        class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">关于我</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#person">个人信息</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="/content">回到首页</a></li>
      </ul>
    </div>
  </nav>
  <!-- Page Content-->
  <div class="container-fluid p-0">
    <!-- About-->
    <section class="resume-section" id="about">
      <div class="resume-section-content">
        <h1 class="mb-0">
          <!-- 姓  -->
          {{ userStore.user.nickName.charAt(0) }}
          <span class="text-primary">
          <!-- 名  -->
            {{ userStore.user.nickName.substr(1) }}
          </span>
        </h1>
        <div class="subheading mb-5">
          <!--    用户身份      -->
          {{ userStore.user.isAdmin === 0 ? '管理员' : '普通用户' }}·
          <a href="mailto:name@email.com">
            <!--     邮箱       -->
            {{ userStore.user.email }}
          </a>
        </div>
        <p class="lead mb-5">
          <!--    每日一言      -->
          {{ showWord['hitokoto'] }} {{ showWord['from'] }}
        </p>
        <div class="social-icons">
          <a class="social-icon" href="#!"><i class="fab fa-linkedin-in"></i></a>
          <a class="social-icon" href="#!"><i class="fab fa-github"></i></a>
          <a class="social-icon" href="#!"><i class="fab fa-twitter"></i></a>
          <a class="social-icon" href="#!"><i class="fab fa-facebook-f"></i></a>
        </div>
      </div>
    </section>
    <hr class="m-0"/>
    <!--  个人信息  -->
    <section class="resume-section" id="person">
      <div class="resume-section-content">
        <h2 class="mb-5">个人信息</h2>
        <el-link icon="Edit" @click="editUserInfo" v-if="!editUserInfoFlag">编辑</el-link>
        <el-link icon="Check" v-else @click="editUserInfoFinish">完成</el-link>
        <ul class="fa-ul mb-0">
          <li>账号:{{ userStore.user.username }}</li>
          <li>
            昵称:<el-input v-if="editUserInfoFlag" v-model="userStore.user.nickName" style="width: 200px"> </el-input>
            <span v-else>{{ userStore.user.nickName }}</span>
          </li>
          <li>
            性别:
            <el-select v-if="editUserInfoFlag" v-model="userStore.user.gender" placeholder="请选择性别" style="width: 100px">
              <el-option
                  v-for="dict in user_sex_gender_options"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
            <span v-else>{{ userStore.user.gender === 0 ? '女' : '男' }}</span>
          </li>
          <li>
            邮箱:<el-input v-if="editUserInfoFlag" v-model="userStore.user.email" style="width: 200px"> </el-input>
            <span v-else>{{ userStore.user.email }}</span>
          </li>
          <li>身份:{{ userStore.user.isAdmin === 0 ? '管理员' : '普通用户' }}</li>
          <li>上次登录时间:{{ parseTime(userStore.user.lastLoginTime, '{y}-{m}-{d}') }}</li>
        </ul>
      </div>
    </section>
  </div>
</template>
<script setup>
import {ref, reactive} from 'vue';
import '@/assets/styles.css'
import '@/assets/scripts'
import useStore from '@/store/index'
import {parseTime} from "@/utils/common";
import {ElMessage} from "element-plus";
import request from "@/utils/request";

// 每日一言
const {oneWord} = require("@/assets/oneWord.json");

const user_sex_gender_options= [
  {
    value: 1,
    label: '男',
  },
  {
    value: 0,
    label: '女',
  }
]

const showWord = oneWord[Math.floor(Math.random() * oneWord.length)]

const editUserInfoFlag=ref(false)

const {userStore} = useStore()

const handleAvatarSuccess = (
    response,
) => {
  console.log('response:',response);
  // 头像上传成功
  if (response.code===200){
    ElMessage.success('头像上传成功')
    userStore.user.header=response.data
  }
}

/**
 * 上传头像前检验是否合规
 * @param rawFile
 * @returns {boolean}
 */
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('不支持该格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片文件不能超过2MB!')
    return false
  }
  return true
}

const editUserInfo=()=>{
  editUserInfoFlag.value=true
}

const editUserInfoFinish=()=>{
  editUserInfoFlag.value=false
  // 修改用户信息，包括昵称、性别、邮箱
  console.log(`昵称:${userStore.user.nickName}  性别:${userStore.user.gender}  ${userStore.user.email}`)
  let data={
    nickName:userStore.user.nickName,
    gender:userStore.user.gender,
    email:userStore.user.email
  }
  request({
    url: '/user/userInfo/update',
    method: 'put',
    data: data
  }).then(res => {
    if (res.code === 200) {
      ElMessage.success('修改成功')
    } else {
      ElMessage.error('修改失败')
    }
  })
}

</script>

<style scoped>

</style>